<template>
  <el-drawer
    title="借款台账"
    v-model="visible"
    direction="rtl"
    size="70%"
    :destroy-on-close="true"
  >
    <div class="loan-drawer">
      <!-- 顶部按钮 -->
      <div class="drawer-header">
        <el-button type="primary" @click="addLoan">+ 借款登记</el-button>
      </div>

      <!-- 借款列表表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="borrower" label="借款人" width="120" />
        <el-table-column prop="borrowDate" label="借款日期" width="120" />
        <el-table-column prop="borrowAmount" label="借款金额(元)" >
          <template #default="scope">
            <span class="amount">¥{{ scope.row.borrowAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="paidAmount" label="已还金额(元)" >
          <template #default="scope">
            <span class="amount">¥{{ scope.row.paidAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remainAmount" label="待还金额(元)" >
          <template #default="scope">
            <span class="amount">¥{{ scope.row.remainAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" >
          <template #default="scope">
            <el-tag 
              :type="scope.row.status === '已清偿' ? 'success' : 'warning'"
              size="small"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button 
              type="primary" 
              link 
              size="small"
              @click="viewDetail(scope.row)"
            >
              查看详情
            </el-button>
            <el-button 
              type="primary" 
              link 
              size="small"
              v-if="scope.row.status === '还款中'"
              @click="recordRepayment(scope.row)"
            >
              还款登记
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, prev, pager, next, sizes"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'LoanDrawer',
  data() {
    return {
      visible: false,
      tableData: [
        {
          borrower: '张雨晨',
          borrowDate: '2024-01-18',
          borrowAmount: '15000.00',
          paidAmount: '6500.00',
          remainAmount: '8500.00',
          status: '还款中'
        },
        {
          borrower: '李明远',
          borrowDate: '2024-01-15',
          borrowAmount: '8000.00',
          paidAmount: '8000.00',
          remainAmount: '0.00',
          status: '已清偿'
        },
        {
          borrower: '赵静怡',
          borrowDate: '2024-01-10',
          borrowAmount: '12000.00',
          paidAmount: '4000.00',
          remainAmount: '8000.00',
          status: '还款中'
        }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 30
    }
  },
  methods: {
    // 打开抽屉
    open() {
      this.visible = true
      this.loadData()
    },
    // 关闭抽屉
    close() {
      this.visible = false
    },
    // 加载数据
    loadData() {
      // TODO: 实现数据加载逻辑
    },
    // 新增借款
    addLoan() {
      // TODO: 实现新增借款逻辑
    },
    // 查看详情
    viewDetail(row) {
      // TODO: 实现查看详情逻辑
    },
    // 还款登记
    recordRepayment(row) {
      // TODO: 实现还款登记逻辑
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.pageSize = val
      this.loadData()
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadData()
    }
  }
}
</script>

<style scoped lang="scss">
.loan-drawer {
  padding: 20px;

  .drawer-header {
    margin-bottom: 20px;
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }

  :deep(.el-drawer__header) {
    margin-bottom: 0;
    padding: 20px;
    border-bottom: 1px solid #e4e7ed;
  }

  .amount {
    font-family: Monaco, monospace;
    color: #606266;
  }

  :deep(.el-table) {
    .el-button {
      padding: 4px 0;
    }
  }
}
</style>
